<template>
  <img :src="imageUrl" :width="imageWidth" :height="imageWidth" v-if="imageUrl" />
</template>
<script>
  import ala from '@/service/ala'
  export default {
    data () {
      return {
        imageUrl: null,
        imageWidth: '36px'
      }
    },
    props: {
      url: {
        default: null
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.imageUrl = this.getImage(this.url)
      },
      getImage (imageUrl) {
        if (imageUrl !== undefined && imageUrl !== null) {
          if (imageUrl.substr(0, 7).toLowerCase() === 'http://' || imageUrl.substr(0, 7).toLowerCase() === 'https:/') {
            return imageUrl
          }
          if (imageUrl.substr(0, 1) === '/') {
            return ala.host + imageUrl.substr(1)
          }
          return ala.host + imageUrl
        }

        return imageUrl
      }
    },
    watch: {
      url: {
        deep: true,
        handler: 'init'
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss">
  .el-table td {
    img {
      border-radius: 50%;
    }
  }
</style>
